<template>
  <div>
    <div :class="$style.container">
      <div :class="$style.statistics">
        <number-info v-for="item in statisticsList" :key="item.label" :background="item.css.background" :border="item.css.border" :icon="item.icon" :item="item"></number-info>
      </div>
      <alarm-workbench></alarm-workbench>
    </div>
    <div :class="$style.container">
      <alarm-track></alarm-track>
    </div>
  </div>
</template>

<script>
import NumberInfo from './../../../default/components/my-home/NumberInfo.vue';
import AlarmWorkbench from './../../../default/components/my-home/AlarmWorkbench.vue';
import AlarmTrack from './../../../default/components/my-home/AlarmTrack.vue';
import { mapGetters } from 'vuex';
import api from '../../../common/js/api';

/**
 * 获取报警工作台数据列表和数量
 * @param {array} params
 */
const getAlertByPage = params => {
  return api.post('alertQueryFlexService.getAlertByPage', params).then(ret => {
    return ret;
  });
};

/**
 * 获取处理中报警数量
 * @param {array}
 */
const getDealingAlarmNumber = () => {
  return api.post('ticketTaskService.getDealingAlertNumber', ['50']).then(ret => {
    return ret;
  });
};

/**
 * 获取已完成报警数量（本月）
 * @param {array}
 */
const getDealDoneAlarmNumber = () => {
  return api.post('ticketTaskService.getDealDoneAlertNumber', ['50']).then(ret => {
    return ret;
  });
};

/**
 * 获取诊断及时率
 * @param {array}
 */
const getOntimeRate = () => {
  return api.post('ticketTaskService.getOntimeRate', []).then(ret => {
    return ret;
  });
};

const getAlarmNumberFn = roleID => {
  let params = [{
    severities: '1,2,3,4',
    states: '-100,0',
    roleId: roleID
  }];
  let pagination = {
    start: 0,
    length: 1,
    statCount: true
  };
  params.push(pagination);
  return getAlertByPage(params);
};

/**
 * 处理百分比
 * @param {number}
 * @return String
 */
const formatPercent = (value) => {
  let ret = (+value).toFixed(2);
  while (ret.endsWith('0') || ret.endsWith('.')) {
    ret = ret.substring(0, ret.length - 1);
  }
  return ret + '%';
};

export default {
  name: 'MyHome',
  components: {
    NumberInfo,
    AlarmWorkbench,
    AlarmTrack
  },

  data () {
    return {
      statisticsList: [
        {
          label: '待处理报警数',
          icon: 'ps ps-bw_01',
          value: '-',
          css: {
            background: '#0C466D',
            border: '1px solid #21A6FB'
          }
        },
        {
          label: '处理中报警数',
          icon: 'ps ps-bw_02',
          value: '-',
          css: {
            background: '#484B2F',
            border: '1px solid #E7B52B'
          }
        },
        {
          label: '已完成报警数（本月）',
          icon: 'ps ps-bw_03',
          value: '-',
          css: {
            background: '#472D3C',
            border: '1px solid #E55057'
          }
        },
        {
          label: '诊断及时率',
          icon: 'ps ps-bw_04',
          value: '-',
          css: {
            background: '#0C466D',
            border: '1px solid #21A6FB'
          }
        }
      ]
    };
  },

  computed: {
    ...mapGetters('role', ['currentRole'])
  },

  watch: {
    currentRole (newValue) {
      if (newValue && newValue.roleID) {
        getAlarmNumberFn(newValue.roleID).then((ret) => {
          this.statisticsList[0].value = ret.code === '0' && ret.data && ret.data.total;
        });
      }
    }
  },

  mounted () {
    if (this.currentRole && this.currentRole.roleID) {
      getAlarmNumberFn(this.currentRole.roleID).then((ret) => {
        this.statisticsList[0].value = ret.code === '0' && ret.data && ret.data.total;
      });
    }
    Promise.all([
      getDealingAlarmNumber(),
      getDealDoneAlarmNumber(),
      getOntimeRate()
    ]).then((ret) => {
      this.statisticsList[1].value = ret[0].code === '0' && ret[0].data;
      this.statisticsList[2].value = ret[1].code === '0' && ret[1].data;
      this.statisticsList[3].value = ret[2].code === '0' && formatPercent(ret[2].data);
    });
  }
};
</script>

<style lang="scss" module>
  @import "./../../../style/default/my-home.scss";
</style>
